<template>
  <div id="home">
    <navbar class="home-navbar">
      <template v-slot:center>
        <p>购物街</p>
      </template>
    </navbar>
    <home-classify
      @showGoodsTab="showGoodsTab"
      ref="homeClassify0"
      class="fixed"
      v-show="showClassify"
    ></home-classify>
    <back-top @click="backtop" v-show="isbackTop"></back-top>
    <scroll
      class="content"
      ref="scroll"
      :probe-type="3"
      :pull-up-load="true"
      @scrollPosition="scrollPosition"
      @pullingUp="loadMore"
      ><swiper-home
        :banners="banners"
        @swiperImgLoad="swiperImgLoad"
      ></swiper-home>
      <stylish :recommends="recommends"></stylish>
      <weekfashion></weekfashion>
      <home-classify
        @showGoodsTab="showGoodsTab"
        ref="homeClassify"
      ></home-classify>
      <beauty :goods="showGoods"></beauty>
    </scroll>
  </div>
</template>

<script>
// import Navbar from "~components/common/navbar/Navbar";
import Navbar from "components/common/navbar/Navbar";
import HomeClassify from "components/content/classify/HomeClassify";
import beauty from "components/content/beautyShow/beauty";
import Scroll from "components/common/scroll/Scroll";

import { getHomeMultidata, getHomeData } from "network/home";
import { debounce } from "common/utils";
import { BackTopMix } from "common/mixin";

import swiperHome from "./childHome/swiperHome";
import Stylish from "./childHome/Stylish";
import Weekfashion from "./childHome/Weekfashion";

export default {
  name: "Home",
  components: {
    Navbar,
    swiperHome,
    Stylish,
    Weekfashion,
    HomeClassify,
    beauty,
    Scroll,
  },
  mixins: [BackTopMix],
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        pop: { page: 1, list: [] },
        new: { page: 1, list: [] },
        sell: { page: 1, list: [] },
      },
      currentGoods: "pop",
      classifyOfferTop: 0,
      showClassify: false,
      saveY: 0,
      itemImgListen: null,
    };
  },
  created() {
    this.multidata();
    this.homedata("pop");
    this.homedata("new");
    this.homedata("sell");
  },
  mounted() {
    //图片加载防抖，下拉加载防抖
    const refresh = debounce(this.$refs.scroll.refresh, 500);
    const finishPullUp = debounce(this.$refs.scroll.finishPullUp, 600);
    this.itemImgListen = () => {
      refresh();
      finishPullUp();
    };
  },
  activated() {
    this.$refs.scroll.refresh();
    this.$refs.scroll.scrollTo(0, this.saveY, 0);
    this.$bus.on("loadOk", this.itemImgListen);
  },
  deactivated() {
    this.saveY = this.$refs.scroll.getScrollY();
    this.$bus.off("loadOk", this.itemImgListen);
  },
  computed: {
    showGoods() {
      return this.goods[this.currentGoods].list;
    },
  },
  methods: {
    multidata() {
      getHomeMultidata().then((res) => {
        this.banners = res.data.banner.list;
        this.recommends = res.data.recommend.list;
      });
    },
    homedata(type) {
      const page = this.goods[type].page;
      getHomeData(type, page).then((res) => {
        this.goods[type].list.push(...res.data.list);
        this.goods[type].page++;
      });
    },

    showGoodsTab(index) {
      switch (index) {
        case 0:
          this.currentGoods = "pop";
          break;
        case 1:
          this.currentGoods = "new";
          break;
        case 2:
          this.currentGoods = "sell";
          break;
      }
      this.$refs.homeClassify0.currerindex = index;
      this.$refs.homeClassify.currerindex = index;
    },

    scrollPosition(e) {
      this.isbackTop = -e.y > 1000;
      this.showClassify = -e.y > this.classifyOfferTop;
    },
    loadMore() {
      this.homedata(this.currentGoods);
    },

    //分类栏吸顶效果
    swiperImgLoad() {
      this.classifyOfferTop = this.$refs.homeClassify.$el.offsetTop;
    },
  },
};
</script>

<style scoped>
#home {
  height: 100vh;
  position: relative;
}
.home-navbar {
  background-color: var(--color-tint);
  color: var(--color-background);
  /* position: fixed;
  top: 0px;
  left: 0px;
  right: 0px; */
  /* z-index: 9; */
}
.content {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 44px;
  bottom: 49px;
}
.fixed {
  position: relative;
  z-index: 9;
  margin-top: -1px;
}
</style>